<template>
  <div>
    <el-card>
      <div slot="header" class="card-title">
        <h4>新增角色</h4>
        <div>
          <el-button type="primary">保存</el-button>
          <el-button type="">返回</el-button>
        </div>
      </div>
      <el-form
        :model="form"
        ref="formRef"
        label-width="auto"
        style="width: 30%"
      >
        <el-form-item label="角色名称">
          <el-input v-model="form.name" placeholder="输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="所属分组">
          <el-select v-model="form.group" placeholder="请选择">
            <el-option label="" value=""></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="firstMenu" label="一级菜单" width="180">
          <template slot-scope="scope">
            <el-checkbox
              :indeterminate="scope.row.firstIsIndeterminate"
              v-model="scope.row.firstMenu"
              @change="(val) => firstHandleCheckAllChange(val, scope.row)"
              >{{ scope.row.firstMenuLabel }}</el-checkbox
            >
          </template>
        </el-table-column>
        <el-table-column prop="secondMenu" label="二级菜单">
          <template slot-scope="scope">
            <el-checkbox
              :indeterminate="scope.row.secondIsIndeterminate"
              v-model="scope.row.secondMenu"
              @change="(val) => secondHandleCheckAllChange(val, scope.row)"
              >{{ scope.row.secondMenuLabel }}</el-checkbox
            >
          </template>
        </el-table-column>
        <el-table-column prop="authorityNode" label="权限节点" min-width="260">
          <template slot-scope="scope">
            <el-checkbox-group
              v-model="scope.row.authorityNode"
              @change="(val) => authorityHandleCheckAllChange(val, scope.row)"
            >
              <el-checkbox
                v-for="(item, index) in scope.row.authorityNodeLabel"
                :key="index"
                :label="item"
              ></el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      tableData: [
        {
          type: 1,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排订单管理",
          secondMenu: false,
          secondMenuLabel: "预排产订单层级",
          authorityNodeLabel: [
            "新建订单",
            "编辑订单",
            "删除订单",
            "订单详情",
            "导出报表",
            "溢出提醒",
            "产能占用申请",
            "冲销记录",
            "外协",
          ],
          authorityNode: [],
        },
        {
          type: 1,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排订单管理",
          secondMenu: false,
          secondMenuLabel: "预排产地区层级",
          authorityNodeLabel: [
            "订单详情",
            "导出报表",
            "溢出提醒",
            "数量返还",
            "冲销记录",
          ],
          authorityNode: [],
        },
        {
          type: 1,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排订单管理",
          secondMenu: false,
          secondMenuLabel: "预排产工厂层级",
          authorityNodeLabel: ["订单详情", "导出报表", "数量返还", "冲销记录"],
          authorityNode: [],
        },
        {
          type: 2,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排生产计划",
          secondMenu: false,
          secondMenuLabel: "一级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "外协",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 2,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排生产计划",
          secondMenu: false,
          secondMenuLabel: "二级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "数量返还",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 2,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "预排生产计划",
          secondMenu: false,
          secondMenuLabel: "三级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "数量返还",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 3,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP实际订单管理",
          secondMenu: false,
          secondMenuLabel: "ERP实际订单订单层级",
          authorityNodeLabel: [
            "关联虚拟订单",
            "查看虚拟订单",
            "订单详情",
            "导出报表",
            "溢出提醒",
            "外协",
          ],
          authorityNode: [],
        },
        {
          type: 3,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP实际订单管理",
          secondMenu: false,
          secondMenuLabel: "ERP实际订单地区层级",
          authorityNodeLabel: [
            "查看虚拟订单",
            "溢出提醒",
            "数量返还",
            "订单详情",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 3,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP实际订单管理",
          secondMenu: false,
          secondMenuLabel: "ERP实际订单工厂层级",
          authorityNodeLabel: [
            "查看虚拟订单",
            "产能占用申请",
            "数量返还",
            "订单详情",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 4,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,

          firstMenu: false,
          firstMenuLabel: "ERP预排生产计划",
          secondMenu: false,
          secondMenuLabel: "一级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "外协",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 4,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP预排生产计划",
          secondMenu: false,
          secondMenuLabel: "二级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "数量返还",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
        {
          type: 4,
          firstIsIndeterminate: false,
          secondIsIndeterminate: false,
          firstMenu: false,
          firstMenuLabel: "ERP预排生产计划",
          secondMenu: false,
          secondMenuLabel: "三级排产",
          authorityNodeLabel: [
            "待排订单",
            "工作日历",
            "编辑日历",
            "排产确认",
            "数量返还",
            "已排订单",
            "重新排产",
            "导出报表",
          ],
          authorityNode: [],
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    // 一级菜单
    firstHandleCheckAllChange(val, row) {
      console.log(val);
      this.tableData.forEach((i) => {
        if (i.type == row.type) {
          i.secondMenu = val;
          i.firstIsIndeterminate = false;
          i.secondIsIndeterminate = false;
          i.authorityNode = val ? i.authorityNodeLabel : [];
        }
      });
    },
    // 二级
    secondHandleCheckAllChange(val, row) {
      row.secondIsIndeterminate = false;
      row.authorityNode = val ? row.authorityNodeLabel : [];
      row.firstMenu = val;
      const typeRows = this.tableData.filter((i) => i.type === row.type);
      // 使用 some 方法判断是否存在 secondMenu 为 false 的情况
      const allSecondMenuTrue = !typeRows.some((i) => !i.secondMenu);
      console.log(allSecondMenuTrue);
      this.tableData.forEach((i) => {
        if (i.type === row.type) {
          if (allSecondMenuTrue) {
            i.firstMenu = true;
            i.firstIsIndeterminate = false;
          } else {
            if (!i.secondMenu) {
              i.firstIsIndeterminate = false;
            } else {
              i.firstIsIndeterminate = true;
            }
            i.firstMenu = false;
          }
        }
      });
    },

    // 权限
    authorityHandleCheckAllChange(val, row) {
      row.secondIsIndeterminate = true;
      row.firstIsIndeterminate = true;
      let checkedCount = val.length;
      const itemCount = checkedCount === row.authorityNodeLabel.length;
      if (itemCount) {
        row.secondIsIndeterminate = false;
        row.secondMenu = true;
      } else {
        row.secondIsIndeterminate = true;
        row.secondMenu = false;
      }
      // 循环设置相同类型的行的权限选中状态
      this.tableData.forEach((i) => {
        if (i.type === row.type) {
          i.firstIsIndeterminate = !itemCount;
          i.firstMenu = itemCount;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: unset !important;
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  h4 {
    flex: 1;
    margin: unset;
  }
  ::v-deep .input-with-select {
    width: unset;
  }
}
</style>
